<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增仓库信息')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-warehouse-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓库类型：</label>
            <div class="col-sm-8">
                <select name="type" id="warehouseType" class="form-control m-b"
                        th:with="type=${@dict.getType('warehouse_type')}"
                        onchange="checkType()">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">关联的总仓：</label>
            <div class="col-sm-8">
                <select id="parentCode" name="parentCode" class="form-control select2-multiple"
                        data-first-title="选择总仓" data-required="true">
                    <option th:each="model:${list}" th:value="${model.warehouseCode}"
                            th:text="${model.warehouseName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓库名称：</label>
            <div class="col-sm-8">
                <input name="warehouseName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">联系人姓名：</label>
            <div class="col-sm-8">
                <input name="name" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">联系人电话：</label>
            <div class="col-sm-8">
                <input name="phone" id="phone" class="form-control" type="text" required>
            </div>
        </div>
        <div id="element1">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">省：</label>
                <div class="col-sm-8">
                    <select name="provinceId" class="province form-control m-b" data-first-title="选择省"
                            data-required="true">
                        <option value="">请选择</option>
                    </select>
                    <!--<input name="provinceId" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">市：</label>
                <div class="col-sm-8">
                    <select name="cityId" class="city form-control m-b" data-first-title="选择市" data-required="true">
                        <option value="">请选择</option>
                    </select>
                    <!--<input name="cityId" class="form-control" type="text">-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">区：</label>
                <div class="col-sm-8">
                    <select name="areaId" class="area form-control m-b" data-first-title="选择地区"
                            data-required="true">
                        <option value="">请选择</option>
                    </select>
                    <!--<input name="areaId" class="form-control" type="text">-->
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓库地址：</label>
            <div class="col-sm-8">
                <input name="address" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">经度：</label>
            <div class="col-sm-8">
                <input name="longitude" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">纬度：</label>
            <div class="col-sm-8">
                <input name="latitude" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">总库位数：</label>
            <div class="col-sm-8">
                <input name="totalStorageCount" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓数：</label>
            <div class="col-sm-8">
                <input name="quantity" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">列数：</label>
            <div class="col-sm-8">
                <input name="columnQuantity" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">行数：</label>
            <div class="col-sm-8">
                <input name="rowQuantity" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input name="remark" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-cxselect-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/warehouse";
    $(function () {
        checkType();
    });
    $("#form-warehouse-add").validate({
        rules: {
            phone: {
                isPhone: true
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            console.log("json:" + JSON.stringify($('#form-warehouse-add').serialize()));
            // $.operate.save(prefix + "/add", $('#form-warehouse-add').serialize());
        }
    }

    var cxSelectApi;
    $.cxSelect.defaults.url = ctx + "system/area/selectByDeep";
    // 方法一：
    cxSelectApi = $.cxSelect($('#element1'), {
        selects: ['province', 'city', 'area'],
        jsonName: 'extName',
        jsonValue: 'id',
        jsonSub: 'sub'
    });

    function checkType() {
        const value = $("#warehouseType").val();
        if (value == "0") {
            $("#parentCode").val("");
            $("#parentCode").attr("disabled", "disabled");
        } else {
            $("#parentCode").removeAttr("disabled");
            $("#parentCode option:first").prop("selected", 'selected');
            $("#parentCode").val($("#parentCode option:first").val());
        }
    }
</script>
</body>
</html>